<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>睿视浏览器</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <style type="text/css">
        .config-panel {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
            z-index: 1000;
            padding: 15px;
            transform: translateY(0);
            transition: transform 0.3s ease;
            overflow-y: auto;
        }
        .config-panel.hidden {
            transform: translateY(-100%);
        }
        .browser-container {
            width: 100%;
            height: 100%;
            position: relative;
        }
        #browser {
            width: 100%;
            height: 100%;
        }
        .control-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(0,122,255,0.8);
            color: white;
            text-align: center;
            line-height: 50px;
            font-size: 24px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            z-index: 999;
            touch-action: manipulation;
        }
        .nav-buttons {
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 999;
            display: flex;
            gap: 10px;
        }
        .nav-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.8);
            color: #333;
            text-align: center;
            line-height: 40px;
            font-size: 18px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            touch-action: manipulation;
        }
        .input-group {
            margin-bottom: 15px;
        }
        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #333;
        }
        .input-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        .btn {
            padding: 12px 15px;
            background-color: #007aff;
            color: white;
            border: none;
            border-radius: 4px;
            width: 100%;
            font-size: 16px;
            margin-top: 10px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .btn:hover {
            background-color: #0066cc;
        }
        .btn-secondary {
            background-color: #f5f5f5;
            color: #333;
        }
        .btn-secondary:hover {
            background-color: #e5e5e5;
        }
        .status-bar {
            height: 20px;
            background-color: #f5f5f5;
        }
        .title-bar {
            padding: 10px 15px;
            background-color: #f5f5f5;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .message-toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 10px 20px;
            background-color: rgba(0,0,0,0.7);
            color: white;
            border-radius: 4px;
            z-index: 1001;
            display: none;
        }
        .message-toast.show {
            display: block;
        }
        .config-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        .config-actions .btn {
            flex: 1;
            margin-top: 0;
        }
        .info-text {
            color: #666;
            font-size: 14px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <!-- 消息提示 -->
    <div class="message-toast" id="messageToast"></div>
    
    <!-- 配置面板 -->
    <div class="config-panel" id="configPanel">
        <div class="title-bar">
            <h3 style="margin:0;">应用配置</h3>
            <button class="btn btn-secondary" id="closeConfig">关闭</button>
        </div>
        
        <div class="input-group">
            <label for="url">访问链接</label>
            <input type="url" id="url" placeholder="请输入网址，如：https://example.com">
            <div class="info-text">请确保网址以http://或https://开头</div>
        </div>
        
        <div class="input-group">
            <label for="refreshInterval">自动刷新间隔(秒)</label>
            <input type="number" id="refreshInterval" min="0" value="0">
            <div class="info-text">设置为0表示不启用自动刷新</div>
        </div>
        
        <div class="config-actions">
            <button class="btn btn-secondary" id="clearConfig">清除配置</button>
            <button class="btn" id="saveConfig">保存并加载</button>
        </div>
        
        <div style="margin-top: 30px;">
            <h4>使用说明</h4>
            <ul style="color: #666; font-size: 14px;">
                <li>设置网址后点击"保存并加载"按钮打开网页</li>
                <li>右下角设置按钮可随时调出配置面板</li>
                <li>左下角提供前进、后退、刷新功能按钮</li>
                <li>配置信息会自动保存在本地</li>
            </ul>
        </div>
    </div>

    <!-- 浏览器容器 -->
    <div class="browser-container">
        <div class="status-bar"></div>
        <webview id="browser" src=""></webview>
    </div>

    <!-- 导航按钮 -->
    <div class="nav-buttons">
        <div class="nav-btn" id="backBtn" title="后退">
            <i class="mui-icon mui-icon-left-nav"></i>
        </div>
        <div class="nav-btn" id="forwardBtn" title="前进">
            <i class="mui-icon mui-icon-right-nav"></i>
        </div>
        <div class="nav-btn" id="refreshBtn" title="刷新">
            <i class="mui-icon mui-icon-refresh"></i>
        </div>
    </div>

    <!-- 控制按钮 -->
    <div class="control-btn" id="configBtn" title="设置">
        <i class="mui-icon mui-icon-cog"></i>
    </div>

    <script type="text/javascript" charset="utf-8">
        // 初始化
        document.addEventListener('plusready', onPlusReady, false);
        
        // 全局变量
        let refreshTimer = null;
        let config = {
            url: '',
            refreshInterval: 0
        };
        let browserWebview = null;
        
        function onPlusReady() {
            // 隐藏系统状态栏，实现全屏
            plus.navigator.setFullscreen(true);
            
            // 获取当前页面的webview
            const currentWebview = plus.webview.currentWebview();
            
            // 等待子webview加载完成
            setTimeout(() => {
                // 获取浏览器webview实例
                browserWebview = plus.webview.getWebviewById('browser');
                
                // 如果获取失败，尝试通过标签查找
                if (!browserWebview) {
                    const webviews = currentWebview.children();
                    for (let i = 0; i < webviews.length; i++) {
                        if (webviews[i].id === 'browser') {
                            browserWebview = webviews[i];
                            break;
                        }
                    }
                }
                
                // 如果仍然获取失败，创建一个新的webview
                if (!browserWebview) {
                    console.log('创建新的browser webview');
                    browserWebview = plus.webview.create(
                        '', 
                        'browser', 
                        {
                            width: '100%',
                            height: '100%',
                            top: '0px',
                            left: '0px'
                        }
                    );
                    // 修复：使用正确的方法将子webview添加到父webview
                    currentWebview.append(browserWebview);
                }
                
                // 从本地存储加载配置
                loadConfig();
                
                // 绑定事件
                bindEvents();
                
                // 如果有配置的URL，直接加载
                if (config.url) {
                    loadUrl(config.url);
                    document.getElementById('configPanel').classList.add('hidden');
                }
            }, 500); // 短暂延迟确保DOM已加载完成
        }
        
        // 绑定所有事件处理函数
        function bindEvents() {
            document.getElementById('saveConfig').addEventListener('click', saveConfigAndLoad);
            document.getElementById('configBtn').addEventListener('click', toggleConfigPanel);
            document.getElementById('closeConfig').addEventListener('click', hideConfigPanel);
            document.getElementById('clearConfig').addEventListener('click', clearConfig);
            document.getElementById('backBtn').addEventListener('click', goBack);
            document.getElementById('forwardBtn').addEventListener('click', goForward);
            document.getElementById('refreshBtn').addEventListener('click', manualRefresh);
            
            // 监听物理返回键
            document.addEventListener('backbutton', function() {
                if (!document.getElementById('configPanel').classList.contains('hidden')) {
                    hideConfigPanel();
                } else if (browserWebview && browserWebview.canBack()) {
                    browserWebview.back();
                } else {
                    // 询问是否退出应用
                    plus.nativeUI.confirm('确定要退出应用吗？', function(e) {
                        if (e.index === 0) {
                            plus.runtime.quit();
                        }
                    }, '提示', ['确定', '取消']);
                }
            }, false);
        }
        
        // 显示消息提示
        function showToast(message, duration = 2000) {
            const toast = document.getElementById('messageToast');
            toast.textContent = message;
            toast.classList.add('show');
            
            setTimeout(() => {
                toast.classList.remove('show');
            }, duration);
        }
        
        // 加载配置
        function loadConfig() {
            const savedConfig = plus.storage.getItem('browserConfig');
            if (savedConfig) {
                try {
                    config = JSON.parse(savedConfig);
                    document.getElementById('url').value = config.url || '';
                    document.getElementById('refreshInterval').value = config.refreshInterval || 0;
                } catch (e) {
                    console.error('加载配置失败:', e);
                    showToast('配置文件损坏，已重置');
                    clearConfig();
                }
            }
        }
        
        // 保存配置并加载页面
        function saveConfigAndLoad() {
            let url = document.getElementById('url').value.trim();
            const refreshInterval = parseInt(document.getElementById('refreshInterval').value) || 0;
            
            if (!url) {
                showToast('请输入网址');
                return;
            }
            
            // 确保URL以http://或https://开头
            if (!url.startsWith('http://') && !url.startsWith('https://')) {
                url = 'http://' + url;
                document.getElementById('url').value = url;
            }
            
            // 保存配置
            config = { url, refreshInterval };
            plus.storage.setItem('browserConfig', JSON.stringify(config));
            
            // 加载URL - 增加了browserWebview存在性检查
            if (browserWebview) {
                loadUrl(url);
                hideConfigPanel();
                showToast('配置已保存');
            } else {
                showToast('浏览器初始化失败，请重试');
                console.error('browserWebview仍为null，无法加载URL');
            }
        }
        
        // 清除配置
        function clearConfig() {
            plus.storage.removeItem('browserConfig');
            config = { url: '', refreshInterval: 0 };
            document.getElementById('url').value = '';
            document.getElementById('refreshInterval').value = 0;
            
            // 清除定时器
            if (refreshTimer) {
                clearInterval(refreshTimer);
                refreshTimer = null;
            }
            
            showToast('配置已清除');
        }
        
        // 加载URL
        function loadUrl(url) {
            // 确保browserWebview已初始化
            if (!browserWebview) {
                showToast('浏览器未准备好，请稍候');
                return;
            }
            
            // 清除之前的定时器
            if (refreshTimer) {
                clearInterval(refreshTimer);
                refreshTimer = null;
            }
            
            // 加载URL
            browserWebview.loadURL(url);
            
            // 设置自动刷新
            if (config.refreshInterval > 0) {
                refreshTimer = setInterval(() => {
                    autoRefresh();
                }, config.refreshInterval * 1000);
                showToast(`已设置自动刷新，间隔${config.refreshInterval}秒`);
            }
        }
        
        // 自动刷新（清除缓存并刷新）
        function autoRefresh() {
            if (!browserWebview) return;
            
            // 清除应用缓存
            plus.cache.clear(function() {
                console.log("缓存清除成功，自动刷新中...");
                browserWebview.reload(true); // 强制刷新
            }, function(e) {
                console.log("缓存清除失败: " + e.message);
                browserWebview.reload(true); // 即使清除缓存失败也尝试刷新
            });
        }
        
        // 手动刷新
        function manualRefresh() {
            if (!browserWebview) {
                showToast('浏览器未准备好');
                return;
            }
            
            showToast('刷新中...');
            plus.cache.clear(function() {
                console.log("缓存清除成功，手动刷新中...");
                browserWebview.reload(true); // 强制刷新
            }, function(e) {
                console.log("缓存清除失败: " + e.message);
                browserWebview.reload(true);
            });
        }
        
        // 后退
        function goBack() {
            if (!browserWebview) {
                showToast('浏览器未准备好');
                return;
            }
            
            if (browserWebview.canBack()) {
                browserWebview.back();
            } else {
                showToast('已到达首页');
            }
        }
        
        // 前进
        function goForward() {
            if (!browserWebview) {
                showToast('浏览器未准备好');
                return;
            }
            
            if (browserWebview.canForward()) {
                browserWebview.forward();
            } else {
                showToast('没有可前进的页面');
            }
        }
        
        // 隐藏配置面板
        function hideConfigPanel() {
            document.getElementById('configPanel').classList.add('hidden');
        }
        
        // 切换配置面板显示状态
        function toggleConfigPanel() {
            const panel = document.getElementById('configPanel');
            panel.classList.toggle('hidden');
        }
    </script>
</body>
</html>
    